<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户订单销售量折线图</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/echarts.js"></script>
    <style>
        .box {
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>
<hr/>
<div class="box"></div>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
    // 获取box元素
    var box = document.getElementsByClassName("box")[0];
        // 定义三个数组
        odate = [];
        price = [];
        count = [];
        // 获取后台返回的JSON数据
        axios.get("order?op=findAll").then(rs=>{
            console.log(rs.data)
            for (var i = 0; i < rs.data.length; i++) {
                odate.push(rs.data[i].odate);
                price.push(rs.data[i].price);
                count.push(rs.data[i].orderCount);
            }
            // 1. 初始化ECharts
            var my_box = echarts.init(box);

            // 2. 进行参数配置
            var option = {
                // 标题
                title: {
                    text: "订单销售量折线图",
                    x: "center",
                    y: "top",
                    textAlign: "left",
                    textStyle: {
                        fontFamily: "楷体",
                        fontSize: 35,
                        textStyle: "bold"
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                // 图例
                legend: {
                    left: "right",
                    orient: "vertical"
                },

                // x轴数据
                xAxis: {
                    data: odate,
                    axisLabel: {
                        show: true, // 是否显示刻度标签，默认显示
                        interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
                        rotate: -90, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
                        inside: false, // 刻度标签是否朝内，默认朝外
                        margin: 6, // 刻度标签与轴线之间的距离
                        // formatter: '{value} Day' , // 刻度标签的内容格式器
                        formatter: function(value) {
                            // 将日期格式从 '2023-10-15' 改为 '23-10-15'
                            var dateParts = value.split('-'); // 分割日期字符串
                            var year = dateParts[0].slice(2); // 获取年份的后两位
                            var month = dateParts[1]; // 获取月份
                            var day = dateParts[2]; // 获取日期

                            return year + '-' + month + '-' + day;
                        }
                    },
                },

                // y轴数据
                yAxis: [{
                    type: 'value',
                    name: '利润',
                    // min: 0,
                    // max: 250,
                    position: 'right',//y坐标刻度位置  左右
                    axisLabel: {//y坐标刻度格式
                        formatter: '{value} 元'
                    }
                },
                    {
                        type: 'value',
                        name: '销售量',
                        min: 0,
                        max: 50,
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} 份'
                        }
                    }],

                // 数据信息
                series: [
                    {
                        name: "利润",
                        type: "line",
                        data: price,
                        yAxisIndex: 0,
                        itemStyle: {
                            normal: {
                                color: '#01b4b4'
                            }
                        }
                    },
                    {
                        name: "销售量",
                        type: "bar",
                        data: count,
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#0229bd'
                            }
                        }
                    },
                ]
            }
            // 3. 可视化呈现
            my_box.setOption(option);
        })

        // my_box.on('click', function(params) {
        //     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        // });

    // }
</script>
</body>
</html>
